<div class="_app" role="application">
  <header class="_header" role="banner">
    <button type="button" aria-label="Toggle navigation" class="_header-btn" data-toggle-sidebar hidden>
      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
    </button>
    <form class="_search" role="search">
      <svg><use xlink:href="#icon-search"/></svg>
      <input type="search" name="q" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
      <button type="reset" class="_search-clear" title="Clear search"><svg><use xlink:href="#icon-close"/></svg>Clear search</button>
      <div class="_search-tag"></div>
    </form>
    <button type="button" aria-label="Back" class="_header-btn" data-back hidden>
      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
    </button>
    <button type="button" aria-label="Forward" class="_header-btn _forward-btn" data-forward hidden>
      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
    </button>
    <button type="button" aria-label="Toggle menu" title="Toggle menu" class="_header-btn _menu-btn" data-toggle-menu>
      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
    </button>
    <nav class="_menu" role="navigation">
      <h1 class="_menu-title"><a href="/" class="_menu-title-link">DevDocs</a></h1>
      <a href="/settings" class="_menu-link">Preferences</a>
      <a href="/offline" class="_menu-link">Offline Data</a>
      <a href="/news" class="_menu-link">Changelog</a>
      <a href="/help" class="_menu-link">Guide</a>
      <a href="/about" class="_menu-link">About</a>
    </nav>
  </header>
  <section class="_sidebar" tabindex="-1">
    <div class="_list" role="navigation">
      <% unless @doc %>
      <% App.docs.each do |slug, doc| %>
      <a href="/<%= slug %>/" class="_list-item"><%= doc['full_name'] %></a>
      <% end %>
      <% end %>
    </div>
  </section>
  <div class="_container" role="document">
    <main class="_content _content-loading" role="main"></main>
  </div>
  <form class="_settings" id="settings">
    <div class="_header">
      <button type="button" aria-label="Back" class="_settings-btn _settings-btn-back" data-back>
        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> Back
      </button>
      <button type="submit" class="_settings-btn _settings-btn-save">
        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Apply
      </button>
      <nav class="_settings-tabs">
        <button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
      </nav>
    </div>
    <div class="_sidebar" tabindex="-1"></div>
  </form>
</div>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></symbol>
    <symbol id="icon-dir" viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></symbol>
    <symbol id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol>
    <symbol id="icon-copy" viewBox="0 0 14 16"><path d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></symbol>
    <symbol id="icon-external-link" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></symbol>
  </defs>
</svg>
<style data-size="<%= app_size %>" data-resizer>
  ._container { margin-left: <%= app_size %>; }
  ._header, ._list { width: <%= app_size %>; }
  ._list-hover.clone { min-width: <%= app_size %>; }
  ._notice, ._path, ._resizer { left: <%= app_size %>; }
</style>
